/*@charset "gb2312";*/ /** * ---------------------------------------------------------------------------- * $codex 1. id和class命名采用该版块的英文单词或组合命名，并第一个单词小写，第二个单词首个字母大写，如:thinkCss（最新产品/think+Css) * $codex 2. CSS样式表各区块用注释说明 * $codex 3. 尽量使用英文命名原则 * $codex 4. 尽量不加中杠和下划线 * $codex 5. 尽量不缩写，除非一看就明白的单词 * $Author: psd2html * $mailto: * $hack :ie 6 _ \ ie7 *+ \ ie6,ie7 * \ ie7,firefox !important ie9, \9 */ /** +------------------------------------------------------------------------------ * 网站样式重写 +------------------------------------------------------------------------------ * @comefrom 互联网 * @subpackage RBAC +------------------------------------------------------------------------------ */ html{-webkit-text-size-adjust:none; /*解决chrome浏览器下字体不能小于12px*/} body{ color:#000000; font-family:Verdana, Arial, Helvetica, sans-serif;} * {} a{outline:none; text-decoration:none;} a:hover{ text-decoration:underline;} html{zoom:1;}html *{outline:0;zoom:1;} html button::-moz-focus-inner{border-color:transparent!important;} body{overflow-x: hidden; font-size:12px;} body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;} table{/*border-collapse:collapse;border-spacing:0;*/} fieldset,a img{border:0;} address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:normal;} li{list-style:none;} caption,th{text-align:left;} h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;} q:before,q:after{content:'';} input[type="submit"], input[type="reset"], input[type="button"], button { -webkit-appearance: none; /*去掉苹果的默认UI来渲染按钮*/} em,i{ font-style:normal;} /** +------------------------------------------------------------------------------ * Public Class +------------------------------------------------------------------------------ * @subpackage RBAC +------------------------------------------------------------------------------ */ .clearfix:after {content:"."; display:block; height:0; clear:both; visibility:hidden; }.clearfix {display:block;}.clear{ clear:both;}/* 清除浮动*/ .colwrapper { overflow:hidden; zoom:1 /*for ie*/; margin:5px auto; }/* 高度自适应 */ .strong{ font-weight: bold;} .left{ float: left;} .right{ float: right;} .center{ margin:0 auto; text-align:center;} .block{ display:block;} .inline{ display:inline;} .transparent{filter:alpha(opacity=50); -moz-opacity:0.5;/** Firefox 3.5即将原生支持opacity属性，所以本条属性只在Firefox3以下版本有效 ***/ -khtml-opacity: 0.5; opacity: 0.5; } .break{ word-wrap:break-word;overflow:hidden; /*word-break:break-all;*/} .tal{ text-align:left} .tar{ text-align:right;} /*文字两侧对齐*/ .justify { text-align:justify; text-justify:distribute-all-lines;/*ie6-8*/ text-align-last:justify;/* ie9*/ -moz-text-align-last:justify;/*ff*/ -webkit-text-align-last:justify;/*chrome 20+*/ } .toe{ /*超出省略号*/ word-break:keep-all; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } @media screen and (-webkit-min-device-pixel-ratio:0){/* chrome*/ .justify:after{ content:"."; display: inline-block; width:100%; overflow:hidden; height:0; } } /* 兼容IE6的定位属性fixed，固定不动样式 */ .fixed{ position:fixed; clip:rect(0 100% 100% 0); _position:absolute; /* 底部 */ bottom:0px; left:0px; _top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight); /*_left:expression(document.documentElement.scrollLeft + document.documentElement.clientWidth - offsetWidth);*/ /* 左侧 */ /*left:0px;*/ /*_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);*/ /*_left:expression(document.documentElement.scrollLeft + document.documentElement.clientWidth - offsetWidth);*/ } /* 解决固定层在IE6下闪的问题 */ *html{ background-image:url(img/-1blank); background-attachment:fixed; } /*png图片ie6下透明滤镜实现写法*/ .pngimg{filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='images/x.png');} /** +------------------------------------------------------------------------------ * FCK 兼容解决方案 +------------------------------------------------------------------------------ * @subpackage RBAC +------------------------------------------------------------------------------ */ em{ font-style:italic !important;} strike{ text-decoration:line-through !important;} strong{ font-weight:bold !important;} u{ text-decoration:underline !important;} /** +------------------------------------------------------------------------------ * 表单样式 +------------------------------------------------------------------------------ * @subpackage RBAC +------------------------------------------------------------------------------ */ /** +------------------------------------------------------------------------------ * 网站整体颜色总汇 +------------------------------------------------------------------------------ * @codex 颜色:使用颜色的名称或者16进制代码,如 * @subpackage RBAC +------------------------------------------------------------------------------ */ .ff8600,ff86aa a{ color:#ff8600;} /** +------------------------------------------------------------------------------ * 网站整字体大小 +------------------------------------------------------------------------------ * @codex 字体大小,直接使用"font+字体大小"作为名称,如 * @package ORG * @subpackage RBAC +------------------------------------------------------------------------------ */ .font14px{ font-size:14px;} .font9pt{ font-size:9pt;} /*自定义字体*/ /* @font-face { font-family: danley; src: url('img/danley.ttf'); } .danley { font-family: danley; } */ /** +------------------------------------------------------------------------------ * 网站整布局命名规范 +------------------------------------------------------------------------------ * @codex id和class命名采用该版块的英文单词或组合命名 如:newRelease * @package ORG * @subpackage RBAC +------------------------------------------------------------------------------ */ a{ color:#5d5d5e; transition: all 0.3s ease-in-out 0s;} a:hover{ color:#3e6ed4;} body{font-family: "Microsoft YaHei",sans-serif;} .css3{ /*transition: all 0.3s ease-in-out 0s;*/ -webkit-transform:translate3d(0, -20px, 0); -ms-transform:translate3d(0, -20px, 0); transform:translate3d(0, -20px, 0); -webkit-transition-property:opacity, -webkit-transform; transition-property:opacity, transform; -webkit-transition-duration:1000ms; transition-duration:1000ms; -webkit-transition-timing-function:cubic-bezier(0.25, 0.46, 0.33, 0.98); transition-timing-function:cubic-bezier(0.25, 0.46, 0.33, 0.98); -webkit-transition-delay:800ms; transition-delay:800ms } .css3.animated{ -webkit-transform:translate3d(0, 0, 0); -ms-transform:translate3d(0, 0, 0); transform:translate3d(0, 0, 0); } @media screen and (max-width: 650px) { } @media screen and (max-width: 480px) { } .rotate { transform:rotate(7deg); -ms-transform:rotate(7deg); /* IE 9 */ -moz-transform:rotate(7deg); /* Firefox */ -webkit-transform:rotate(7deg); /* Safari 和 Chrome */ -o-transform:rotate(7deg); /* Opera */ } body{ font-size: 12px; line-height: 22px; } .wrapper{ width: 1200px; margin: 0 auto; position: relative; } .gb-header, .gb-nav{ height: 86px; background: #fff; position: fixed; left: 0; right: 0; z-index: 8; } .gb-nav{ background: rgba(255,255,255,0.25); z-index: 99999; } .gb-nav, .gb-header{ top: -86px; /*css3*/ -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; opacity: 0; -webkit-opacity: 0; -moz-opacity: 0; } .gb-nav.show, .gb-header.show{ top: 0; opacity: 1; -webkit-opacity: 1; -moz-opacity: 1; } .gb-nav.show{ background: rgba(0,0,0,0.25); } .gh { float:right; height:34px; width:34px; margin-right:30px; margin-top:25px; position:relative; transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1) 0s; -webkit-transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1) 0s; -ms-transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1) 0s; cursor:pointer; } .gh.selected { transform: rotate(90deg); } .gh a { background-color: #000; display: block; height: 4px; margin-top: -2px; position: relative; top: 50%; transition: all 0.3s cubic-bezier(0.7, 0, 0.3, 1) 0s; -webkit-transition: all 0.3s cubic-bezier(0.7, 0, 0.3, 1) 0s; -ms-transition: all 0.3s cubic-bezier(0.7, 0, 0.3, 1) 0s; width: 100%; } .gh:hover a:before { transform: translateY(-2px) rotate(0deg); -webkit-transform: translateY(-2px) rotate(0deg); -ms-transform: translateY(-2px) rotate(0deg); } .gh:hover a:after { transform: translateY(2px) rotate(0deg); -webkit-transform: translateY(2px) rotate(0deg); -ms-transform: translateY(2px) rotate(0deg); } .gh.selected:hover a:before { transform: translateY(0px) rotate(-55deg); -webkit-transform: translateY(0px) rotate(-55deg); -ms-transform: translateY(0px) rotate(-55deg); } .gh.selected:hover a:after { transform: translateY(0px) rotate(55deg); -webkit-transform: translateY(0px) rotate(55deg); -ms-transform: translateY(0px) rotate(55deg); } .gh a:after, .gh a:before { background-color: #000; content: ""; display: block; height: 4px; left: 0; position: absolute; transition: all 0.3s cubic-bezier(0.7, 0, 0.3, 1) 0s; -webkit-transition: all 0.3s cubic-bezier(0.7, 0, 0.3, 1) 0s; -ms-transition: all 0.3s cubic-bezier(0.7, 0, 0.3, 1) 0s; width:100%; } .gh a:after { top:10px; } .gh a:before { top:-10px; } .gh.selected a:after, .gh.selected a:before { top: 0; } .gh.selected a:before { transform: translateY(0px) rotate(-45deg); -webkit-transform: translateY(0px) rotate(-45deg); -ms-transform: translateY(0px) rotate(-45deg); } .gh.selected a:after { transform: translateY(0px) rotate(45deg); -webkit-transform: translateY(0px) rotate(45deg); -ms-transform: translateY(0px) rotate(45deg); } .gh.selected a { background-color: transparent !important; } .gb-nav.show .gh a, .gb-nav.show .gh a:after, .gb-nav.show .gh a:before{ background-color:#fff;} .header .logo, .gb-nav .logo{ margin-left: 60px; float: left; display: inline; margin-top: 5px; } .gb-nav .logo{ position: relative; } .gb-nav .logo img{ position: absolute; left: 0; top: 0; } .gb-nav .logo img.img2{ -webkit-transition: all 1s; -moz-transition: all 1s; -o-transition: all 1s; transition: all 1s; opacity: 0; -webkit-opacity: 0; -moz-opacity: 0; } .gb-nav.show .logo img.img2{ opacity: 1; -webkit-opacity: 1; -moz-opacity: 1; } .header .nav{ margin-right: 50px; float: right; display: inline; margin-top: 40px; } .header .nav li{ float: left; display: inline; margin-left: 40px; font-size: 14px; } .header .nav li a{ display: block; height: 24px; line-height: 24px; overflow: hidden; } .header .nav li span{ display: block; /*css3*/ transition: all 0.3s ease-in-out 0s; } .header .nav li span.s2{ color: #610085; font-weight: bold; } .header .nav li a:hover .s1, .header .nav li.selected a .s1{ margin-top: -24px; } .section{ position: relative; } .page1{ background: url(img/bg1.jpg) no-repeat center; background-size: cover !important; height: 886px; } /*.page1 .nav{ background: url(img/img4.png) repeat-x center; height: 32px; position: absolute; left: 0; right: 0; bottom: -60px; text-align: center; -webkit-transition: all 1s; -moz-transition: all 1s; -o-transition: all 1s; transition: all 1s; } .page1.active .nav{ bottom: 40px; } .page1 .nav li{ display: inline; margin: 0 75px; } .page1 .nav li a{ background: url(img/img3.png) no-repeat center; width: 32px; height: 32px; display: inline-block; } .page1 .nav li.selected a{ background-image: url(img/img2.png); }*/ .page1 .arrow, .page1 .nav{ z-index: 2; } .page1 .arrow{ width: 87px; height: 87px; position: absolute; left: 50%; margin-left: -44px; bottom: 110px; cursor: pointer; display:block; -moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%; } .page1 .arrow table{ width: 100%; height: 100%; text-align: center; position: relative; top: 5px; } .page1 .arrow:before, .page1 .arrow:after { content:''; position:absolute; left:0; top:0; -moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%; pointer-events:none } .page1 .arrow:before { width:88px; height:88px; border:1px solid #fff; -moz-transition:all 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955); -o-transition:all 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955); -webkit-transition:all 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955); transition:all 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955) } .page1 .arrow:after { width:86px; height:86px; border:2px solid #fff; background-color:rgba(255, 255, 255, 0.1); opacity:0; -moz-transform:scale(0.5, 0.5); -ms-transform:scale(0.5, 0.5); -webkit-transform:scale(0.5, 0.5); transform:scale(0.5, 0.5); -moz-transition:all 0.8s cubic-bezier(0.77, 0, 0.175, 1); -o-transition:all 0.8s cubic-bezier(0.77, 0, 0.175, 1); -webkit-transition:all 0.8s cubic-bezier(0.77, 0, 0.175, 1); transition:all 0.8s cubic-bezier(0.77, 0, 0.175, 1) } .page1 .arrow:hover:before { opacity:0; -moz-transform:scale(1.5, 1.5); -ms-transform:scale(1.5, 1.5); -webkit-transform:scale(1.5, 1.5); transform:scale(1.5, 1.5); -moz-transition:all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); -o-transition:all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-transition:all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); transition:all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) } .page1 .arrow:hover:after { opacity:1; -moz-transform:scale(1, 1); -ms-transform:scale(1, 1); -webkit-transform:scale(1, 1); transform:scale(1, 1) } .page2{ background: url(img/bg2.jpg) no-repeat center; background-size: cover !important; height: 964px; } .page2 .wrapper{ height: 100%; } .page2 ul{ height: 100%; } .page2 li{ width: 25%; float: left; display: inline; text-align: center; color: #fff; height: 100%; position: relative; /*css3*/ -webkit-transition: all 1s; -moz-transition: all 1s; -o-transition: all 1s; transition: all 1s; opacity: 0; -webkit-opacity: 0; -moz-opacity: 0; } .page2 li .bg{ position: absolute; left: 0; right: 0; bottom: 0; height: 0; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; background-color: #1A52F0; } .page2 li.selected .bg{ height: 100%; } .page2 li.l2 .bg{ background-color: #ACD146; } .page2 li.l3 .bg{ background-color: #04AAA2; } .page2 li.l4 .bg{ background-color: #F8C200; } .page2 li .wrap{ position: absolute; left: 30px; right: 30px; top: 50%; margin-top: -110px; } .page2 li .ico{ width: 109px; height: 109px; border-radius: 109px; margin: 0 auto; background-position: center top; background-repeat: no-repeat; overflow: hidden; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; -webkit-transition-delay:400ms; transition-delay:400ms; } .page2 li.l1 .ico{ background-image: url(img/img5.png); } .page2 li.l2 .ico{ background-image: url(img/img6.png); } .page2 li.l3 .ico{ background-image: url(img/img7.png); } .page2 li.l4 .ico{ background-image: url(img/img8.png); } .page2 li.selected .ico{ background-position: center bottom; } .page2 li .link{ text-align: center; margin-top: 35px; } .page2 li .link a{ background: url(img/img41.png) no-repeat; width: 48px; height: 48px; display: inline-block; } .page2 li .img{ position: absolute; left: 0; right: 0; bottom: -200px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; -webkit-transition-delay:400ms; transition-delay:400ms; opacity: 0; -webkit-opacity: 0; -moz-opacity: 0; } .page2 li.selected .img{ bottom: 0; opacity: 1; -webkit-opacity: 1; -moz-opacity: 1; } .page2 li .img img{ display: block; width: 100%; } .page2 li a{ color: #fff; text-decoration: none; } .page2 li.selected{ } .page2 li.l1{ -webkit-transform:translate3d(-600px, 0, 0); -ms-transform:translate3d(-600px, 0, 0); transform:translate3d(-600px, 0, 0); } .page2 li.l2{ -webkit-transform:translate3d(-300px, 0, 0); -ms-transform:translate3d(-300px, 0, 0); transform:translate3d(-300px, 0, 0); } .page2 li.l3{ -webkit-transform:translate3d(300px, 0, 0); -ms-transform:translate3d(300px, 0, 0); transform:translate3d(300px, 0, 0); } .page2 li.l4{ -webkit-transform:translate3d(600px, 0, 0); -ms-transform:translate3d(600px, 0, 0); transform:translate3d(600px, 0, 0); } .page2.active li{ -webkit-transform:translate3d(0, 0, 0); -ms-transform:translate3d(0, 0, 0); transform:translate3d(0, 0, 0); opacity: 1; -webkit-opacity: 1; -moz-opacity: 1; } .page2 li h2{ margin-top: 20px; font-size: 18px; font-weight: bold; line-height: 1; } .page2 li dl{ margin-top: 18px; } .page2 li dd{ display: inline; } .page2 li dd span{ width: 1px; height: 15px; display: inline-block; background: #fff; margin: 0 15px; } .page2 li p{ margin-top: 30px; line-height: 24px; } .page3{ background: url(img/bg3.jpg) repeat center; height: 1040px; } .page3 .wrapper{ position: absolute; left: 50%; margin-left: -600px; top: 50%; margin-top: -220px; } .page3 .head{ position: relative; padding-left: 350px; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; -webkit-transition-delay:600ms; transition-delay:600ms; /*opacity: 0; -webkit-opacity: 0; -moz-opacity: 0;*/ } .page3.active .head{ /*opacity: 1; -webkit-opacity: 1; -moz-opacity: 1;*/ } .page3 .head .img{ position: absolute; left: -400px; top: 0; transition: all 1s ease 0s; -webkit-transition: all 1s ease 0s; -ms-transition: all 1s ease 0s; opacity: 0; -webkit-opacity: 0; -ms-opacity: 0; } .page3.active .head .img{ left: 0; opacity: 1; -webkit-opacity:1; -ms-opacity: 1; } .page3 .head .nav{ padding-top: 30px; } .page3 .head .nav li{ display: inline; margin-right: 30px; } .page3 .head .sort{ position: absolute; left: 1500px; bottom: 0; padding-top: 20px; color: #e9930b; text-transform: uppercase; transition: all 1s ease 0s; -webkit-transition: all 1s ease 0s; -ms-transition: all 1s ease 0s; opacity: 0; -webkit-opacity: 0; -ms-opacity: 0; } .page3.active .head .sort{ left: 610px; opacity: 1; -webkit-opacity: 1; -ms-opacity: 1; } .page3 .head .sort a{ color:#e9930b ; } .page3 .head .sort dt{ position: absolute; left: 0; top: 0; } .page3 .head .sort dd{ display: inline; } .page3 .head .sort dd span{ margin: 0 10px; display: inline-block; width: 1px; height: 11px; background: #f19f1c; } .page3 .body{ margin-top: 45px; position: relative; top: 0; } .page3 .body ul{ height: auto; overflow: hidden; width: 105%; } .page3 .body li{ width: 290px; height: 190px; position: relative; float: left; display: inline; margin-right: 16px; margin-bottom: 16px; overflow: hidden; -webkit-transition: all 1s; -moz-transition: all 1s; -o-transition: all 1s; transition: all 1s; opacity: 0; -webkit-opacity: 0; -moz-opacity: 0; -webkit-transform:translate3d(0, 100px, 0); -ms-transform:translate3d(0, 100px, 0); transform:translate3d(0, 100px, 0); } .page3.active .body li{ opacity: 1; -webkit-opacity: 1; -moz-opacity: 1; -webkit-transform:translate3d(0, 0, 0); -ms-transform:translate3d(0, 0, 0); transform:translate3d(0, 0, 0); } .page3.active .body li:nth-child(2){ -webkit-transition-delay:200ms; transition-delay:200ms; } .page3.active .body li:nth-child(3){ -webkit-transition-delay:400ms; transition-delay:400ms; } .page3.active .body li:nth-child(4){ -webkit-transition-delay:600ms; transition-delay:600ms; } .page3.active .body li:nth-child(5){ -webkit-transition-delay:800ms; transition-delay:800ms; } .page3.active .body li:nth-child(6){ -webkit-transition-delay:1000ms; transition-delay:1000ms; } .page3.active .body li:nth-child(7){ -webkit-transition-delay:1200ms; transition-delay:1200ms; } .page3.active .body li:nth-child(8){ -webkit-transition-delay:1400ms; transition-delay:1400ms; } .page3 .body li .img img{ -webkit-transition: all 1s; -moz-transition: all 1s; -o-transition: all 1s; transition: all 1s; } .page3 .body li a:hover .img img{ transform: scale(1.2); } .page3 .body li .brand{ background: rgba(233,148,11,0.83); position: absolute; left: 0; right: 0; top: 0; bottom: 0; text-align: center; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; opacity:0; -webkit-opacity: 0; -moz-opacity: 0; } .page3 .body li a:hover .brand{ opacity:1; -webkit-opacity: 1; -moz-opacity: 1; } .page3 .body li .brand table{ width: 100%; height: 100%; text-align: center; } .page3 .jian{ width: 46px; height: 46px; border-radius:46px; display: inline-block; position: relative; } .jian:before, .jian:after { content:''; position:absolute; left:0; top:0; -moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%; pointer-events:none } .jian:before { width:46px; height:46px; border:1px solid #f19f1c; -moz-transition:all 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955); -o-transition:all 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955); -webkit-transition:all 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955); transition:all 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955) } .jian:after { width:46px; height:46px; border:1px solid #f19f1c; background-color:rgba(255, 255, 255, 0.1); opacity:0; -moz-transform:scale(0.5, 0.5); -ms-transform:scale(0.5, 0.5); -webkit-transform:scale(0.5, 0.5); transform:scale(0.5, 0.5); -moz-transition:all 0.8s cubic-bezier(0.77, 0, 0.175, 1); -o-transition:all 0.8s cubic-bezier(0.77, 0, 0.175, 1); -webkit-transition:all 0.8s cubic-bezier(0.77, 0, 0.175, 1); transition:all 0.8s cubic-bezier(0.77, 0, 0.175, 1) } .jian:hover:before { opacity:0; -moz-transform:scale(1.5, 1.5); -ms-transform:scale(1.5, 1.5); -webkit-transform:scale(1.5, 1.5); transform:scale(1.5, 1.5); -moz-transition:all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); -o-transition:all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-transition:all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); transition:all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) } .jian:hover:after { opacity:1; -moz-transform:scale(1, 1); -ms-transform:scale(1, 1); -webkit-transform:scale(1, 1); transform:scale(1, 1) } .page4{ background: url(img/bg4.jpg) no-repeat center; background-size: cover !important; height: 998px; } .page4 .wrapper{ position: absolute; left: 50%; margin-left: -600px; top: 50%; margin-top: -220px; } .page4 .head .img, .page4 .head .list, .page4 .head .list dl#dl1, .page4 .head .list dl#dl2, .page4 .list li{ -webkit-transition: all 1s; -moz-transition: all 1s; -o-transition: all 1s; transition: all 1s; opacity: 0; -webkit-opacity: 0; -moz-opacity: 0; } .page4.active .head .img, .page4.active .head .list, .page4.active .head .list dl#dl1, .page4.active .head .list dl#dl2, .page4.active .list li{ opacity: 1; -webkit-opacity: 1; -moz-opacity: 1; } .page4 .head{ position: relative; width: 105%; } .page4 .head .img{ margin-left: 30px; position: relative; left: -100px; } .page4.active .head .img{ left: 0; } .page4 .head .nav{ position: absolute; left: 260px; top: 20px; } .page4 .head .nav li{ display: inline; margin-right: 20px; } .page4 .head .list{ position: absolute; left: 485px; top: 25px; -webkit-transform:translate3d(-300px, 0, 0); -ms-transform:translate3d(-300px, 0, 0); transform:translate3d(-300px, 0, 0); } .page4.active .head .list{ -webkit-transform:translate3d(0, 0, 0); -ms-transform:translate3d(0, 0, 0); transform:translate3d(0, 0, 0); } .page4 .head .list dl{ float: left; display: inline; border-top: #f2f4f3 solid 1px; position: relative; padding-top: 45px; color: #fff; } .page4 .head .list dl a{ color: #fff; } .page4 .head .list dl#dl1{ width: 470px; } .page4 .head .list dl#dl2{ width: 240px; margin-left: 15px; } .page4 .head .list dt{ position: absolute; left: 0; top: 10px; font-size: 14px; font-weight: bold; } .page4 .head .list dd span{ margin: 0 5px; } .page4 .body{ margin-top: 75px; } .page4 .list{ height: auto; overflow: hidden; width: 105%; margin-top:-25px; } .page4 .list li{ float: left; display: inline; width: 228px; height: 306px; background: #fff; margin-right: 15px; position: relative; transition-delay: 1s; -webkit-transition-delay: 1s; -ms-transition-delay: 1s; } .page4 .list li:nth-child(2){ top: 200px; left: 100px; } .page4 .list li:nth-child(3){ top: 400px; left: 200px; } .page4 .list li:nth-child(4){ top: 600px; left: 300px; } .page4 .list li:nth-child(5){ top: 800px; left: 400px; } .page4.active .list li{ top: 0; left: 0; height:306px; } .page4 .view{ position: relative; padding-top: 140px; padding-left: 35px; padding-right: 30px; } .page4 .view h4{ font-size:14px; color:#000;} .page4 .view .date{ position: absolute; left: 115px; top: 40px; } .page4 .view .date big{ font-size: 50px; font-weight: bold; font-family: impact; } .page4 .view .date span{ position: absolute; left: 18px; bottom: 0; background: #fff; padding: 0 5px; line-height: 1.3; font-family: arial; width: 80px; } .page4 .view .img{ height: 90px; } .page4 .view .img table{ width: 100%; height: 100%; } .page4 .view h2{ font-size: 15px; line-height: 25px; color:#000; } .page4 .mask{ background: #e50581; position: absolute; left: 0; right: 0; top: 400px; bottom: 0; padding: 40px 30px; color: #fff; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; opacity: 0; -webkit-opacity: 0; -moz-opacity: 0; } .page4 .mask .img img{ display: block; } .page4 a:hover .mask, .page4 .selected .mask{ top: 0; opacity: 1; -webkit-opacity: 1; -moz-opacity: 1; } .page4 .mask h2{ margin-top: 20px; font-size: 15px; } .page4 .mask hr{ width: 37px; height: 1px; border: none; background: #fff; display: block; margin-top: 20px; margin-left: 0; } .page4 .mask p{ margin-top: 20px; clear: both; } .page4 .wen{ width: 46px; height: 46px; border-radius:46px; display: inline-block; position: relative; } .page4 .wen:before, .wen:after { content:''; position:absolute; left:0; top:0; -moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%; pointer-events:none } .page4 .wen:before { width:46px; height:46px; border:1px solid #fff; -moz-transition:all 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955); -o-transition:all 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955); -webkit-transition:all 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955); transition:all 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955) } .page4 .wen:after { width:46px; height:46px; border:1px solid #fff; background-color:rgba(255, 255, 255, 0.1); opacity:0; -moz-transform:scale(0.5, 0.5); -ms-transform:scale(0.5, 0.5); -webkit-transform:scale(0.5, 0.5); transform:scale(0.5, 0.5); -moz-transition:all 0.8s cubic-bezier(0.77, 0, 0.175, 1); -o-transition:all 0.8s cubic-bezier(0.77, 0, 0.175, 1); -webkit-transition:all 0.8s cubic-bezier(0.77, 0, 0.175, 1); transition:all 0.8s cubic-bezier(0.77, 0, 0.175, 1) } .page4 .wen:hover:before { opacity:0; -moz-transform:scale(1.5, 1.5); -ms-transform:scale(1.5, 1.5); -webkit-transform:scale(1.5, 1.5); transform:scale(1.5, 1.5); -moz-transition:all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); -o-transition:all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-transition:all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); transition:all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) } .page4 .wen:hover:after { opacity:1; -moz-transform:scale(1, 1); -ms-transform:scale(1, 1); -webkit-transform:scale(1, 1); transform:scale(1, 1) } .page5 { height: 1115px; background: url(img/about_bg.jpg) no-repeat center; background-size: cover !important; height: 673px; } .page5 .wrapper{ position: absolute; left: 50%; margin-left: -600px; top: 50%; margin-top: -240px; } .page5 .img-wrap{ width: 500px; float: left; display: inline; border-top: #000000 solid 3px; position: relative; } .page5 .img-wrap .img1, .page5 .img-wrap .img2, .page5 .img-wrap .img3, .page5 .img-wrap .img4, .page5 .text, .page5 .nav li{ -webkit-transition: all 1s; -moz-transition: all 1s; -o-transition: all 1s; transition: all 1s; transition-delay: 0.5s; -webkit-transition-delay: 0.5s; opacity: 0; -webkit-opacity: 0; -moz-opacity: 0; } .page5.active .img-wrap .img1, .page5.active .img-wrap .img2, .page5.active .img-wrap .img3, .page5.active .img-wrap .img4, .page5.active .text, .page5.active .nav li{ opacity: 1; -webkit-opacity: 1; -moz-opacity: 1; } .page5 .img-wrap .img1{ margin-left: 90px; margin-top: 30px; transition-delay: 0s; -webkit-transition-delay: 0s; transform: scale(0); -webkit-transform: scale(0); } .page5.active .img-wrap .img1{ transform: scale(1); -webkit-transform: scale(1); } .page5 .img-wrap .img2{ position: absolute; left: 60px; top: 20px; -webkit-transform:translate3d(-100px, 0, 0); -ms-transform:translate3d(-100px, 0, 0); transform:translate3d(-100px, 0, 0); } .page5.active .img-wrap .img2{ -webkit-transform:translate3d(0, 0, 0); -ms-transform:translate3d(0, 0, 0); transform:translate3d(0, 0, 0); } .page5 .img-wrap .img3{ position: absolute; left: -100px; top: 80px; } .page5.active .img-wrap .img3{ left: 0; } .page5 .img-wrap .img4{ margin-top: 20px; margin-left: 290px; } .page5.active .img-wrap .img4{ margin-left: 90px; } .page5 .text{ width: 260px; float: left; display: inline; margin-left: 130px; border-top: #000000 solid 1px; padding-top: 40px; position: relative; top: 200px; } .page5.active .text{ top: 0; } .page5 .text h2{ font-size: 18px; margin-bottom: 20px; font-weight: bold; } .page5 .text p{ margin-bottom: 30px; font-size: 14px; line-height: 26px; } .page5 .nav{ width: 240px; float: right; display: inline; } .page5 .nav li{ border-top: #000000 solid 1px; padding-top: 40px; padding-bottom: 40px; position: relative; top: -200px; } .page5 .nav li:first-child{ transition-delay: 0.7s; -webkit-transition-delay: 0.7s; } .page5.active .nav li{ top: 0; } .page6{ /*background: url(img/bg6.jpg) no-repeat center; */background-size: cover !important; height: 900px; } .page6 video{ position: absolute; left: 0; right: 0; top: 0; bottom: 0; min-width:100%; } .page6 .bg{ background: url(img/img50.png) repeat; position: absolute; left: 0; right: 0; top: 0; bottom: 0; } .page6 .wrapper{ position: absolute; left: 50%; margin-left: -600px; top: 50%; margin-top: -205px; } .page6 .img{ margin-left: 340px; position: relative; } .page6 .img .quan, .page6 .img .wen{ -webkit-transition: all 2s; -moz-transition: all 2s; -o-transition: all 2s; transition: all 2s; opacity: 0.9; -webkit-opacity: 0.9; -moz-opacity: 0.9; } .page6.active .img .quan, .page6.active .img .wen{ opacity: 1; -webkit-opacity: 1; -moz-opacity: 1; } .page6 .img .wen{ position: absolute; left: 160px; top: 60px; -webkit-transform:translate3d(100px, 0, 0); -ms-transform:translate3d(100px, 0, 0); transform:translate3d(100px, 0, 0); } .page6.active .img .wen{ -webkit-transform:translate3d(0, 0, 0); -ms-transform:translate3d(0, 0, 0); transform:translate3d(0, 0, 0); } .page6 .img .quan{ -webkit-transform:translate3d(-100px, 0, 0); -ms-transform:translate3d(-100px, 0, 0); transform:translate3d(-100px, 0, 0); } .page6.active .img .quan{ -webkit-transform:translate3d(0, 0, 0); -ms-transform:translate3d(0, 0, 0); transform:translate3d(0, 0, 0); } .page6 .text{ height: auto; margin-top: 60px; } .page6 .time{ width: 340px; float: left; display: inline; color: #fff; font-family: arial; line-height: 1; } .page6 .time .wrap{ display: inline-block; text-align: center; } .page6 .time h2{ margin-top: 10px; color: #fff; font-size: 21px; } .page6 .time h4{ margin-top: 10px; } .page6 .tele{ width: 860px; float: right; display: inline; } .page6 .tele img{ display: block; } .page6 .tele .qq{ margin-top: 30px; } .page6 .info{ height: auto; overflow: hidden; width: 1200px; position: absolute; left: 50%; margin-left: -600px; bottom: 35px; color: #c3c5c3; } .page6 .info a{ color: #c3c5c3; } .page6 .info ul{ width: 340px; float: left; display: inline; font-size: 12px; } .flink{ background: #202020; padding: 25px 0; color: #4f4f4f; } .flink dt, .flink dd{ display: inline; margin-right: 35px; line-height: 27px; } .flink dt{ font-weight: bold; } .gb-arrow{ background: url(img/img42.png) no-repeat left center; height: 47px; line-height: 47px; padding-left: 30px; position: absolute; left: 30px; top: 50%; margin-top: 1500px; font-size: 12px; color: #fff; -webkit-transition: all 2s; -moz-transition: all 2s; -o-transition: all 2s; transition: all 2s; opacity: 0; -webkit-opacity: 0; -moz-opacity: 0; } .active .gb-arrow{ margin-top: -23px; opacity: 1; -webkit-opacity: 1; -moz-opacity: 1; } .slide-wrap{ width: 100%; height: 100%; position: relative; } .slide-wrap ul{ width: 100%; height: 100%; } .slide-wrap li{ width: 100%; height: 100%; overflow: hidden; text-align: center; position: absolute; left: 0; right: 0; top: 0; bottom: 0; } .slide-wrap li .wrap{ position: absolute; left: 0; right: 0; top: 50%; margin-top: -250px; } .slide-wrap li.selected{ } .slide-wrap li .bg{ background: url(img/img50.png) repeat; position: absolute; left: 0; right: 0; top: 0; bottom: 0; transition: all 1s; -webkit-transition: all 1s; -ms-transition: all 1s; -moz-transition: all 1s; opacity: 0; -webkit-opacity: 0; -ms-opacity: 0; -moz-opacity: 0; } .slide-wrap li.selected .bg{ opacity: 1; -webkit-opacity: 1; -ms-opacity: 1; -moz-opacity: 1; } .slide-wrap li .img{ position: relative; z-index: 9; transition: all 1s; -webkit-transition: all 1s; -ms-transition: all 1s; -moz-transition: all 1s; } .slide-wrap li.selected .img{ -webkit-transform:translate3d(0, 0, 0) !important; -ms-transform:translate3d(0, 0, 0) !important; transform:translate3d(0, 0, 0) !important; } .slide-wrap li .text{ color: #fff; font-size: 20px; margin-top: 25px; position: relative; z-index: 9; transition: all 0.5s; -webkit-transition: all 0.5s; -ms-transition: all 0.5s; -moz-transition: all 0.5s; } .slide-wrap video{ position: absolute; z-index: 0; top: -93px; left: 0px; min-width: 0px; /*min-height: 999px;*/ min-width: 100%; height: auto; transition: all 0.5s; -webkit-transition: all 0.5s; -ms-transition: all 0.5s; -moz-transition: all 0.5s; } .slide-wrap li#s1 video{ opacity:0; } .slide-wrap li#s1.selected video{ opacity:1; } .slide-wrap li#s1 .img{ opacity:0; -webkit-transform:translate3d(0, 50px, 0); -ms-transform:translate3d(0, 50px, 0); transform:translate3d(0, 50px, 0); } .slide-wrap li#s1.selected .img{ opacity:1; } .slide-wrap li#s1 .text{ opacity:0; } .slide-wrap li#s1.selected .text{ opacity:1; } .slide-wrap li#s2 video{ opacity:0; -webkit-opacity:0; -ms-opacity:0; -moz-opacity:0; } .slide-wrap li#s2.selected video{ opacity:1; -webkit-opacity:1; -ms-opacity:1; -moz-opacity:1; } .slide-wrap li#s2 .img{ position: relative; display: inline-block; opacity:0; -webkit-transform:translate3d(0, 50px, 0); -ms-transform:translate3d(0, 50px, 0); transform:translate3d(0, 50px, 0); } .slide-wrap li#s2.selected .img{ opacity:1; } .slide-wrap li#s2 .quan{ position: absolute; right: 0; top: 0; } .slide-wrap li#s2 .img{ opacity:0; } .slide-wrap li#s2 .text{ opacity:0; } .slide-wrap li#s3 video{ opacity: 0; } .slide-wrap li#s3.selected video{ opacity: 1; } .slide-wrap li#s3 .img{ opacity:0; -webkit-transform:translate3d(0, 50px, 0); -ms-transform:translate3d(0, 50px, 0); transform:translate3d(0, 50px, 0); } .slide-wrap li#s3.selected .img{ opacity:1; } .slide-wrap li#s3 .text{ opacity:0; } .slide-wrap li#s3.selected .text{ opacity:1; } .slide-nav-wrap { position:absolute; left:0; bottom:0; width:100%; padding-top:25px; margin-bottom:-22px; opacity:1; overflow:hidden; z-index:8; -moz-transform:translateY(100%); -ms-transform:translateY(100%); -webkit-transform:translateY(100%); transform:translateY(100%); transform: matrix(1, 0, 0, 1, 0, 0); -webkit-transform: matrix(1, 0, 0, 1, 0, 0); -moz-transform: matrix(1, 0, 0, 1, 0, 0); -ms-transform: matrix(1, 0, 0, 1, 0, 0); height: 84px; } #slide-nav { position:relative; width:620px; height:26px; margin:auto; -moz-transform:translateX(90px); -ms-transform:translateX(90px); -webkit-transform:translateX(90px); transform:translateX(90px) } .nav-line { float:left; position:relative; width:90px; height:1px; top:13px } .nav-line:after { content:''; position:absolute; top:0; width:90px; height:100%; background-color:#fff; -moz-transition:all 0.8s cubic-bezier(0.77, 0, 0.175, 1); -o-transition:all 0.8s cubic-bezier(0.77, 0, 0.175, 1); -webkit-transition:all 0.8s cubic-bezier(0.77, 0, 0.175, 1); transition:all 0.8s cubic-bezier(0.77, 0, 0.175, 1) } .nav-line.small:after { width:78px } .nav-line.x-small:after { width:63px; -moz-transition:all 1s cubic-bezier(0.77, 0, 0.175, 1); -o-transition:all 1s cubic-bezier(0.77, 0, 0.175, 1); -webkit-transition:all 1s cubic-bezier(0.77, 0, 0.175, 1); transition:all 1s cubic-bezier(0.77, 0, 0.175, 1) } .nav-line.prev:after { left:0 } .nav-line.next:after { right:0 } .nav-line:first-child:before, .nav-line:last-child:before { content:''; position:absolute; top:0; width:8000px; height:1px; background-color:#fff; -moz-backface-visibility:hidden; -webkit-backface-visibility:hidden; backface-visibility:hidden } .nav-line:first-child:before { left:-8000px } .nav-line:last-child:before { right:-8000px } .nav-bullet-container { float:left; position:relative; width:26px; height:26px; -moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50% } .nav-bullet-container:nth-child(1) { margin-left:100px } .nav-bullet-container:before { content:''; position:absolute; top:-15px; left:8px; opacity:0; pointer-events:none; width:0; height:0; border-style:solid; border-width:6px 5px 0 5px; border-color:#fff transparent transparent transparent; -moz-transform:translateY(-10px); -ms-transform:translateY(-10px); -webkit-transform:translateY(-10px); transform:translateY(-10px); -moz-transition:all 0.8s cubic-bezier(0.77, 0, 0.175, 1); -o-transition:all 0.8s cubic-bezier(0.77, 0, 0.175, 1); -webkit-transition:all 0.8s cubic-bezier(0.77, 0, 0.175, 1); transition:all 0.8s cubic-bezier(0.77, 0, 0.175, 1); -moz-backface-visibility:hidden; -webkit-backface-visibility:hidden; backface-visibility:hidden } .desktop #slide-nav .nav-bullet-container:hover:before { -moz-transform:translateY(0px); -ms-transform:translateY(0px); -webkit-transform:translateY(0px); transform:translateY(0px); opacity:1 } .desktop #slide-nav .nav-bullet-container:hover .nav-link:before { -moz-transform:scale(2, 2); -ms-transform:scale(2, 2); -webkit-transform:scale(2, 2); transform:scale(2, 2); opacity:0; -moz-transition:all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); -o-transition:all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-transition:all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); transition:all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) } .desktop #slide-nav .nav-bullet-container:hover .nav-link:after { -moz-transform:scale(3.3, 3.3); -ms-transform:scale(3.3, 3.3); -webkit-transform:scale(3.3, 3.3); transform:scale(3.3, 3.3); opacity:0.2 } .desktop #slide-nav .nav-bullet-container:hover .nav-bullet { opacity:1; -moz-transform:scale(1, 1); -ms-transform:scale(1, 1); -webkit-transform:scale(1, 1); transform:scale(1, 1) } .desktop #slide-nav .nav-bullet-container:hover .nav-text { opacity:1; -moz-transform:translateY(0px); -ms-transform:translateY(0px); -webkit-transform:translateY(0px); transform:translateY(0px) } .nav-bullet-container.active .nav-link:after { opacity:1 } .nav-link { display:block; position:relative; width:100%; height:100%; color:#fff; } .nav-link:before { content:''; position:absolute; left:5px; top:5px; width:14px; height:14px; border:1px solid #fff; -moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%; opacity:0.5; -moz-transition:all 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955); -o-transition:all 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955); -webkit-transition:all 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955); transition:all 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955) } .nav-link:after { content:''; position:absolute; left:9px; top:9px; width:8px; height:8px; -moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%; background-color:#fff; opacity:0.5; -moz-backface-visibility:hidden; -webkit-backface-visibility:hidden; backface-visibility:hidden; -moz-transition:all 0.8s cubic-bezier(0.77, 0, 0.175, 1); -o-transition:all 0.8s cubic-bezier(0.77, 0, 0.175, 1); -webkit-transition:all 0.8s cubic-bezier(0.77, 0, 0.175, 1); transition:all 0.8s cubic-bezier(0.77, 0, 0.175, 1) } .nav-bullet { position:absolute; left:9px; top:9px; width:8px; height:8px; -moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%; background-color:#fff; opacity:0; -moz-transform:scale(0, 0); -ms-transform:scale(0, 0); -webkit-transform:scale(0, 0); transform:scale(0, 0); -moz-transition:all 0.8s cubic-bezier(0.77, 0, 0.175, 1); -o-transition:all 0.8s cubic-bezier(0.77, 0, 0.175, 1); -webkit-transition:all 0.8s cubic-bezier(0.77, 0, 0.175, 1); transition:all 0.8s cubic-bezier(0.77, 0, 0.175, 1) } .nav-text { position:absolute; left:-44px; bottom:-22px; width:113px; text-align:center; opacity:0; pointer-events:none; -moz-transform:translateY(10px); -ms-transform:translateY(10px); -webkit-transform:translateY(10px); transform:translateY(10px); -moz-transition:all 0.8s cubic-bezier(0.77, 0, 0.175, 1); -o-transition:all 0.8s cubic-bezier(0.77, 0, 0.175, 1); -webkit-transition:all 0.8s cubic-bezier(0.77, 0, 0.175, 1); transition:all 0.8s cubic-bezier(0.77, 0, 0.175, 1); color: #fff; } /*雷达波纹效果*/ .gb-radar{ position: relative; } .gb-radar:before, .gb-radar:after { content:''; position:absolute; left:0; top:0; -moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%; pointer-events:none } .gb-radar:before { width:88px; height:88px; border:1px solid #fff; -moz-transition:all 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955); -o-transition:all 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955); -webkit-transition:all 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955); transition:all 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955) } .gb-radar:after { width:86px; height:86px; border:2px solid #fff; background-color:rgba(255, 255, 255, 0.1); opacity:0; -moz-transform:scale(0.5, 0.5); -ms-transform:scale(0.5, 0.5); -webkit-transform:scale(0.5, 0.5); transform:scale(0.5, 0.5); -moz-transition:all 0.8s cubic-bezier(0.77, 0, 0.175, 1); -o-transition:all 0.8s cubic-bezier(0.77, 0, 0.175, 1); -webkit-transition:all 0.8s cubic-bezier(0.77, 0, 0.175, 1); transition:all 0.8s cubic-bezier(0.77, 0, 0.175, 1) } .gb-radar:hover:before { opacity:0; -moz-transform:scale(1.5, 1.5); -ms-transform:scale(1.5, 1.5); -webkit-transform:scale(1.5, 1.5); transform:scale(1.5, 1.5); -moz-transition:all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); -o-transition:all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-transition:all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); transition:all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) } .gb-radar:hover:after { opacity:1; -moz-transform:scale(1, 1); -ms-transform:scale(1, 1); -webkit-transform:scale(1, 1); transform:scale(1, 1) } /*弹出菜单*/ #nav { position:fixed; top:0; width:0; width:100%; height:100%; background:#282828; z-index:9999; transition: all 0.6s; -webkit-transition: all 0.6s; -ms-transition: all 0.6s; -moz-transition: all 0.6s; opacity: 1; -webkit-opacity: 1; -ms-opacity: 1; -moz-opacity: 1; } #nav.hide{ top: -100%; opacity: 0; -webkit-opacity: 0; -ms-opacity: 0; -moz-opacity: 0; } .nav_top { width:100%; } .nav_main { max-width:1000px; height:514px; margin:0 auto; position:relative; top:50%; margin-top:-250px; display:table; } .nav_main h1 { color:#fff; font-size:48px; clear:both; padding-left:10px; font-style:italic; font-family: "MS Serif","New York",Microsoft YaHei; } .nav_main ul { width:100%; padding-top:80px; display:table; } .nav_main ul li { width:257px; height:130px; padding-left:76px; float:left; color:#fff; } .nav_main ul li a { color:#fff; } .nav_main ul li h2 { height:50px; line-height:50px; font-size:16px; } .nav_main ul li h2 a em { color:#949494; margin-left:20px; font-size:12px; font-style:normal; font-family:Verdana, Geneva, sans-serif; } .nav_main ul li div a { color:#dbdbdb; display:block; line-height:22px; font-size:12px; } .nav_main ul li div a:hover { color:#fff; } .nav_main ul li.homes { background:url(img/homes.png) no-repeat 10px 12px; } .nav_main ul li.services { background:url(img/services.png) no-repeat 10px 12px; } .nav_main ul li.cases { background:url(img/cases.png) no-repeat 10px 12px; } .nav_main ul li.abouts { background:url(img/abouts.png) no-repeat 10px 12px; } .nav_main ul li.news { background:url(img/news.png) no-repeat 10px 12px; } .nav_main ul li.Advantages { background:url(img/Advantages.png) no-repeat 10px 12px; } .nav_main ul li.Experiences { background:url(img/tiyans.png) no-repeat 10px 12px; } .nav_main ul li.Jobs { background:url(img/jobs.png) no-repeat 10px 12px; } .nav_main ul li.Contacts { background:url(img/contacts.png) no-repeat 10px 12px; } .nav_main ul li div a:after { -webkit-transition: 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); transition: 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .nav-toggle { background-color: #fff; position: fixed; -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: 0.5s ease-in-out; transition: 0.5s ease-in-out; cursor: pointer; border-radius: 50%; width: 36px; height: 36px; top: 15px; right: 13px; z-index: 30; overflow: hidden; } .nav-toggle span { width: 16px; display: block; height: 2px; position: absolute; left: 10px; background-color: #24252f; opacity: 1; -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: 1s cubic-bezier(0.68, -0.55, 0.265, 1.55); transition: 1s cubic-bezier(0.68, -0.55, 0.265, 1.55); } .nav-toggle span:nth-child(1) { top: 13px; } .nav-toggle span:nth-child(2) { top: 18px; } .nav-toggle span:nth-child(3) { top: 23px; } .nav-toggle.close span:nth-child(1) { top: 18px; -webkit-transform: rotate(135deg); -ms-transform: rotate(135deg); transform: rotate(135deg); } .nav-toggle.close span:nth-child(2) { opacity: 0; left: -30px; } .nav-toggle.close span:nth-child(3) { top: 18px; -webkit-transform: rotate(-135deg); -ms-transform: rotate(-135deg); transform: rotate(-135deg); } a.logo_menu { margin-top:21px; display:inline-block; margin-left:31px; } a.close_menu { width:50px; height:48px; display:inline-block; margin-top:20px; background:url(img/close.png) no-repeat; float:right; margin-right:30px; -moz-transition:-moz-transform 0.5s; /* Firefox 4 */ -webkit-transition: -webkit-transform 0.5s; /* Safari and Chrome */ -o-transition: -o-transform 0.5s; /* Opera */ } a.close_menu:hover { -moz-transform:rotate(90deg); /* Firefox 4 */ -webkit-transform:rotate(90deg); /* Safari and Chrome */ -o-transform:rotate(90deg); /* Opera */ } .sidebar{ position: fixed; right: 0; top: 50%; margin-top: -80px; width: 55px; background: rgba(0,0,0,0.3); padding: 12px 0 0 0; border-radius:8px 0 0 8px; z-index:999999; } .sidebar li{ height: 50px; width: 160px; padding-left: 17px; border-radius:8px 0 0 8px; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } .sidebar li img{ display: block; } .sidebar li:hover{ margin-left: -105px; background: rgba(0,0,0,0.6); } /*进度条*/ #loader{ position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 999999; background: #none; } #loader .myStat{ margin: 0 auto; } #loader .wrap{ text-align: center; color: #fff; position: absolute; left: 50%; margin-left: -100px; width: 200px; height: 120px; top: 50%; margin-top: -60px; } #loader .wrap h2{ margin-top: 20px; } #loader .quan{ width: 100px; height: 100px; border-radius:100px; margin: 0 auto; text-align: center; line-height: 100px; font-size: 12px; position: relative; } #loader .quan .num{ width:60px ; height: 22px; background: #000; position: absolute; top: 50%; margin-top: -8px; left: 20px; text-align: center; color: #fff; line-height: 1; }